<!--
 * @Author: 噜噜雯雯 2199987619@qq.com
 * @Date: 2025-05-22 14:32:05
 * @LastEditors: 噜噜雯雯 2199987619@qq.com
 * @LastEditTime: 2025-09-28 14:33:45
 * @FilePath: \巡检管理系统\巡检轨迹详情
-->
<script setup lang="ts">
import AMapLoader from '@amap/amap-jsapi-loader'
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
import { ElRow, ElCol } from 'element-plus'
import { useGISStore } from '@/store/modules/gis'
import { useDictStore } from '@/store/modules/dictData'
import { useTrackPlayStore } from '@/store/modules/trackplayback'
import copy from '@/assets/imgs/copy.png'
const PATH_URL = import.meta.env.VITE_API_PHOTO_PATH
const GISStore = useGISStore()
const TrackPlayStore = useTrackPlayStore()
GISStore.setPipeLineInfo() //管线
GISStore.setPipePointInfo() //管点
onMounted(() => {
  // initMap();
  // GISStore.setPipePointInfo(); //管点
})
const PipeLineInfo = computed(() => {
  return GISStore.getPipeLineInfo
})
const DictStore = useDictStore()
//获取字典
DictStore.setDict('pipe_line_type') //管线类型字典：决定管线颜色
watch(
  () => PipeLineInfo.value,
  () => {
    initMap()
    // updateMonacoVal(props.modelValue)
  }
)
let infoWindows: {
  setContent: (arg0: any) => void
  open: (arg0: any, arg1: number[]) => void
} //信息窗控件
const polylines = [] as any //管线数组
const markers = [] as any //标注点
let map: any
let marker: any = []
// var LineArr: any = [];
// 修改这部分代码
const markersArray = [] as any // 用于存储坐标点的数组
const linePath = [] as any // 用于存储轨迹路径的数组
const zoom = ref(12)
// const center = computed(() => {
//   if (TrackPlayStore.getTrackPlayList.userPosnVos) {
//     zoom.value = 15
//     return [
//       TrackPlayStore.getTrackPlayList.userPosnVos[0].lon,
//       TrackPlayStore.getTrackPlayList.userPosnVos[0].lat
//     ]
//   } else {
//     zoom.value = 12
//     return [115.95, 35.59]
//   }
// })
const center = computed(() => {
  return TrackPlayStore.getTrackPlayList.userPosnVos
    ? [
        TrackPlayStore.getTrackPlayList.userPosnVos[0].lon,
        TrackPlayStore.getTrackPlayList.userPosnVos[0].lat
      ]
    : [115.95, 35.59]
})

// 使用 watch 处理副作用
watch(center, (newCenter) => {
  zoom.value = newCenter[0] === 115.95 ? 12 : 15
}, { immediate: true })


function initMap() {
  AMapLoader.load({
    key: 'cdaa418d97b829c9ca7590fa62799ac5', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.MoveAnimation'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  }).then((AMap) => {
    map = new AMap.Map('container', {
      resizeEnable: false,
      //设置地图容器id
      viewMode: '2D', //是否为3D地图模式
      zoom: zoom.value, //初始化地图级别
      // center: 12, //初始化地图中心点位置
      center: center.value
    })
    //鼠标退出，关闭浮窗
    const hideInfoWindow = () => {
      map.clearInfoWindow() // 关闭详细信息的浮窗，地图方法
    }
    //
    infoWindows = new AMap.InfoWindow({
      isCustom: true,
      offset: new AMap.Pixel(10, -15) // 偏移量
    })
    //鼠标进入，创建浮窗
    const showInfoWindow = (data: string | undefined, e: any) => {
      const info = [] as any
      // 组成一个要显示的dom，class可以增加对应的css，不过要加scoped可能不起作用，加scoped的话，less或者sass 可以用deep
      info.push(`<p class='TipCard'> ${data}</p>`)
      infoWindows.setContent(info.join(''))
      infoWindows.open(map, e) // 打开弹窗
    }
    map.on('zoomchange', () => {
      const zoom = map.getZoom()
      if (zoom >= 13.5) {
        // 创建点覆盖物
        GISStore.PipePointInfo.map((item: any) => {
          const startIcon = new AMap.Icon({
            // 图标尺寸
            size: new AMap.Size(item.mapDropStyle.iocnSize, item.mapDropStyle.iocnSize),
            // 图标的取图地址
            image: PATH_URL + item.mapDropStyle.mapIocn,
            // 图标所用图片大小
            imageSize: new AMap.Size(item.mapDropStyle.iocnSize, item.mapDropStyle.iocnSize)
            // 图标取图偏移量
          })
          const marker = new AMap.Marker({
            map: map,
            position: [item.lon, item.lat],
            icon: startIcon,
            extData: item,
            offset: new AMap.Pixel(-17, -35)
          })
          marker.on('mouseover', function (e: any) {
            // 显示这个marker点详细信息的浮窗，这个要放单独方法调用才能显示，暂时不明白为什么，直接把方法内的东西写在下面浮窗并不显示
            showInfoWindow(item.facName, e.lnglat)
          })
          marker.on('mouseout', hideInfoWindow)
          markers.push(marker)
        })
      } else {
        map.remove(markers)
      }
    })
    //线路
    GISStore.PipeLineInfo.map((item) => {
      const polyline = new AMap.Polyline({
        map: map,
        extData: item,
        path: [
          [item.startLon, item.startLat],
          [item.endLon, item.endLat]
        ],
        showDir: false,
        strokeColor: item.pipeLineType == 'pipe_line_type_2' ? 'red' : 'rgb(29,65,245)', //线颜色
        strokeOpacity: 1, //线透明度
        strokeWeight: 5, //线宽
        strokeStyle: 'solid' //线样式
      })
      polyline.on('mouseover', function (e: any) {
        // 显示这个marker点详细信息的浮窗，这个要放单独方法调用才能显示，暂时不明白为什么，直接把方法内的东西写在下面浮窗并不显示
        showInfoWindow(item.pipeLineName, e.lnglat)
      })
      polyline.on('mouseout', hideInfoWindow)
      polylines.push(polyline)
      map.add(polyline)
    })

    TrackPlayStore.getTrackPlayList.userPosnVos?.map((item) => {
      markersArray.push([item.lon, item.lat])
      linePath.push([item.lon, item.lat])
    })
    const Lon = TrackPlayStore.getTrackPlayList.userPosnVos[0]['lon']
    const Lat = TrackPlayStore.getTrackPlayList.userPosnVos[0]['lat']
    // console.log(TrackPlayStore.getTrackPlayList.userPosnVos[0]);

    // map.setZoomAndCenter(15, [Lon, Lat]);
    marker = new AMap.Marker({
      map: map,
      position: [Lon, Lat],
      // size: new AMap.Size(13, 26),
      // icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
      // icon: "/public/copy.png",
      // offset: new AMap.Pixel(-13, -26),
      icon: new AMap.Icon({
        image: copy, // 图标图片URL
        size: new AMap.Size(30, 30), // 图标大小
        imageSize: new AMap.Size(30, 30), // 图片实际大小
        imageOffset: new AMap.Pixel(0, 0) // 图片偏移量
      }),
      offset: new AMap.Pixel(-15, -15) // 图标偏移量
    })
    // 绘制轨迹
    const polyline = new AMap.Polyline({
      map: map,
      path: linePath, // 使用 linePath 而不是 LineArr
      showDir: true,
      strokeColor: '#cc3f58', //线颜色
      strokeOpacity: 1, //线透明度
      strokeWeight: 6 //线宽
      // strokeStyle: "solid"  //线样式
    })
    polyline.on('mouseout', hideInfoWindow)
    polyline.on('mouseover', function (e: any) {
      // 显示这个marker点详细信息的浮窗，这个要放单独方法调用才能显示，暂时不明白为什么，直接把方法内的东西写在下面浮窗并不显示
      showInfoWindow(`巡线，点数量${TrackPlayStore.getTrackPlayList.posnNo}`, e.lnglat)
    })
    const passedPolyline = new AMap.Polyline({
      map: map,
      strokeColor: '#AF5', //线颜色
      strokeWeight: 6 //线宽
    })
    passedPolyline.on('mouseout', hideInfoWindow)
    passedPolyline.on('mouseover', function (e: any) {
      // 显示这个marker点详细信息的浮窗，这个要放单独方法调用才能显示，暂时不明白为什么，直接把方法内的东西写在下面浮窗并不显示
      showInfoWindow(`巡线，点数量${TrackPlayStore.getTrackPlayList.posnNo}`, e.lnglat)
    })
    marker.on('moving', function (e) {
      passedPolyline.setPath(e.passedPath)
      map.setCenter(e.target.getPosition(), true)
    })
    map.add(polyline)
  })
}

onUnmounted(() => {
  TrackPlayStore.TrackPlayList = [] as any
})
const startAnimation = () => {
  // window.startAnimation = function startAnimation() {
  marker.moveAlong(linePath, {
    // 每一段的时长
    duration: 500, //可根据实际采集时间间隔设置
    // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
    autoRotation: true
  })
  // };
}

const pauseAnimation = () => {
  marker.pauseMove()
}
const resumeAnimation = () => {
  marker.resumeMove()
}
</script>

<template>
  <div style="height: 100%; width: 100%">
    <div id="container" style="height: 600px; width: 100%"></div>
    <div class="input-card">
      <div class="column">
        <button class="btn" @click="startAnimation()">开始</button>
        <button class="btn" @click="pauseAnimation()">暂停</button>
        <button class="btn" @click="resumeAnimation()">继续</button>
      </div>
      <ElRow :gutter="20" style="font-size: 12px">
        <ElCol :span="8"><span>巡检人：</span>{{ TrackPlayStore.getTrackPlayList.user }}</ElCol>
        <ElCol :span="8"
          ><span>总距离：</span>{{ TrackPlayStore.getTrackPlayList.mileage }}Km</ElCol
        >
        <ElCol :span="8"
          ><span>时长：</span>{{ TrackPlayStore.getTrackPlayList.duration }}小时</ElCol
        >
      </ElRow>
    </div>
  </div>
</template>
<style scoped>
:deep(.TipCard) {
  padding: 5px 10px;
  background: rgb(20, 161, 242);
  border: 1px solid #fff;
  border-radius: 4px;
  font-size: 14px;
  color: #fff;
  font-family: '黑体';
}
.home_div {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  position: relative;
}
:deep(.amap-copyright),
:deep(.amap-logo) {
  display: none !important;
}
.input-card {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  /* align-items: center; */
  min-width: 0;
  word-wrap: break-word;
  background-color: aliceblue;
  background-clip: border-box;
  width: 400px;
  height: 100px;
  border-radius: 0.4rem;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
  position: absolute;
  bottom: 20px;
  left: 0px;
  right: 0px;
  margin: auto;
  padding: 0.75rem 1.25rem;
  text-align: center;
}
.column {
  display: flex;
  justify-content: space-between;
  width: 60%;
  margin-left: 20%;
}
.btn {
  display: inline-block;
  font-weight: 400;
  width: 30%;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  background-color: transparent;
  color: #25a5f7;
  border-color: #25a5f7;
  padding: 0.15rem 0.5rem;
  line-height: 1.5;
  border-radius: 1rem;
  cursor: pointer;
}

.input-card .btn:last-child {
  margin-right: 0;
}
</style>
